<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .box {
        width: 820px;
        height: 390px;
        /* background-color: blue; */
        margin: 50px auto;
        /* 溢出隐藏 */
        overflow: hidden;
    }
    .box .picture {
        width: 500%;
        height: 340px;
        display: flex;
        
    }
    
    .picture li {
        width: 820px;
        height: 340px;
        
        background: url(./images/1.jpg) no-repeat center 100%/100%;
    }
    .picture li:nth-child(2) {
        background: url(./images/2.jpg) no-repeat center 100%/100%;
    }
    .picture li:nth-child(3) {
        background: url(./images/3.jpg) no-repeat center 100%/100%;
    }
    .picture li:nth-child(4) {
        background: url(./images/4.jpg) no-repeat center 100%/100%;
    }
    .picture li:nth-child(5) {
        background: url(./images/5.jpg) no-repeat center 100%/100%;
    }
    .box .base {
        width: 820px;
        height: 50px;
        display: flex;
    }
    .box .base div {
        width: 164px;
        height: 48px;
        cursor: pointer;
        text-align: center;
        line-height: 50px;
        background-color: #E3E2E2;
    }
    .box .base div.current {
        color: orangered;
        background-color: white;
        border-bottom: 2px solid #CEA861;
    }
</style>
<body>
    <div class="box">
        
            <ul class="picture">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        
        <div class="base">
            <div class="current">FPX冠军皮肤</div>
            <div>魔女 婕拉 至臻</div>
            <div>2020LPL春季赛季后赛</div>
            <div>挑战主播赢现金</div>
            <div>每周显示优惠</div>
        </div>
    </div>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script>
        // 我们发现有重复的功能,所以我们进行函数的封装
        function goto( myIndex ){
            // 滑动图片
            $(".picture").animate({
                "marginLeft" : -820*myIndex
            });

            // 高亮对应的span
            $(".base div").eq( myIndex ).addClass("current").siblings("div").removeClass("current");
        }

        // 点击下面的文字内容,可以滑到对应图片位置
        $(".base div").click(function(){
            // 获取当前索引号
            var index = $(this).index();
            // 调用goto函数
            goto( index );

            // 点击以后,要告诉currentIndex现在的最新的索引号
            currentIndex = index;
        });

        var currentIndex = 0;

        var timer = null;
        function autoPlay() {
            if ( timer == null ) {
                timer = window.setInterval( function () {
                    currentIndex++;
                    currentIndex = currentIndex % 5;
                    goto( currentIndex );
                },1500)
            }
        }
        function stopPlay() {
            window.clearInterval( timer );
            timer = null;
        }
       // 调用autoPlay方法
       autoPlay();
        

        // 鼠标.box移上以后,停止定时器(自动轮播图), 鼠标.box移走以后,继续定时(重新开始自动轮播)
        $(".box").hover(function(){
            // 停止定时器
            stopPlay();
        },function(){
            // 重新开启定时器
            autoPlay();
        });
    </script>
</body>
</html>